<template>
  <div v-loading="loading" class="overView-container">
    <div class="board-header">
      <div class="header-left">
        <span class="header-font">{{ time }}</span>
      </div>
    </div>
    <div class="content">
      <px-row :gutter="24" class="mg-b-8 mg-t-8">
        <px-col :span="12">
          <div class="view-info">
            <px-row :gutter="24">
              <px-col :span="12" style="padding-right: 0">
                <div class="top-bar view-info-bar fdc">
                  <!-- <img class="view-info-img" src="@/assets/images/energy/overView/coal.png" /> -->
                  <div class="top-bar-black">
                    <img class="w45" src="@/assets/images/energy/overView/coal_e_c.png" />
                    <div class="lf">
                      <p class="view-info-title">当月等价折标煤(tce)</p>
                      <div class="w-font rt">
                        <p class="num view-info-num">{{ moneyFormat(currentMonthData.scoalEquivalent) }}</p>
                        <div>
                          <span v-if="yoy_scoalEquivalent.includes('-')">
                            <TriangleDownGreen class="triangle" />
                            <TriangleUp class="triangle" />
                          </span>
                          <span v-else>
                            <TriangleDown class="triangle" />
                            <TriangleUpRed class="triangle" />
                          </span>
                          <span class="mg-l-8 mg-r-8">{{ yoy_scoalEquivalent }}</span>
                          <span>同比</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="top-bar-black">
                    <img class="w45" src="@/assets/images/energy/overView/coal_e_c.png" />
                    <div class="lf">
                      <p class="view-info-title">当月当量折标煤(tce)</p>
                      <div class="w-font rt">
                        <p class="num view-info-num">{{ moneyFormat(currentMonthData.scoalCalorific) }}</p>
                        <div>
                          <span v-if="yoy_scoalCalorific.includes('-')">
                            <TriangleDownGreen class="triangle" />
                            <TriangleUp class="triangle" />
                          </span>
                          <span v-else>
                            <TriangleDown class="triangle" />
                            <TriangleUpRed class="triangle" />
                          </span>
                          <span class="mg-l-8 mg-r-8">{{ yoy_scoalCalorific }}</span>
                          <span>同比</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </px-col>
              <px-col :span="12">
                <div class="top-bar view-info-bar fdc" style="height: 76px; margin-bottom: 12px">
                  <div class="top-bar-black">
                    <img class="w45" src="@/assets/images/energy/overView/co2.png" />
                    <div class="lf">
                      <p class="view-info-title">当月碳排放(tCO2e)</p>
                      <div class="w-font rt">
                        <p class="num view-info-num">{{ moneyFormat(currentMonthData.ecarbon) }}</p>
                        <div>
                          <span v-if="yoy_ecarbon.includes('-')">
                            <TriangleDownGreen class="triangle" />
                            <TriangleUp class="triangle" />
                          </span>
                          <span v-else>
                            <TriangleDown class="triangle" />
                            <TriangleUpRed class="triangle" />
                          </span>
                          <span class="mg-l-8 mg-r-8">{{ yoy_ecarbon }}</span>
                          <span class="mg-l-8">同比</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="top-bar view-info-bar fdc" style="height: 76px">
                  <div class="top-bar-black">
                    <img class="w45" src="@/assets/images/energy/overView/production.png" />
                    <div class="lf">
                      <p class="view-info-title">单位产量能耗(tce/PCS)</p>
                      <div class="w-font rt">
                        <p class="num view-info-num">{{ tcePCS }}</p>
                        <div>
                          <span v-if="yoy_product.includes('-')">
                            <TriangleDownGreen class="triangle" />
                            <TriangleUp class="triangle" />
                          </span>
                          <span v-else>
                            <TriangleDown class="triangle" />
                            <TriangleUpRed class="triangle" />
                          </span>
                          <span class="mg-l-8 mg-r-8">{{ yoy_product }}</span>
                          <span class="mg-l-8">同比</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </px-col>
            </px-row>
          </div>
        </px-col>
        <px-col :span="12">
          <div class="handle-info">
            <px-row :gutter="8">
              <px-col :span="8">
                <div class="top-bar handle-info-bar">
                  <div class="handle-info-title-bar flex-center">
                    <img class="handle-info-img" src="@/assets/images/energy/overView/consumption.png" />
                    <span>当月能耗异常</span>
                  </div>
                  <div class="handle-info-bottom">
                    <div class="handle-info-bottom-bar">
                      <p class="num">{{ alarmData?.consumeNotStart }}</p>
                      <span class="w-font">待处理</span>
                    </div>
                    <div class="handle-info-bottom-bar">
                      <p class="num">{{ alarmData?.consumeHandling }}</p>
                      <span class="w-font">处理中</span>
                    </div>
                    <div class="handle-info-bottom-bar">
                      <p class="num">{{ alarmData?.consumeComplete }}</p>
                      <span class="w-font">已完成</span>
                    </div>
                  </div>
                </div>
              </px-col>
              <px-col :span="8">
                <div class="top-bar handle-info-bar">
                  <div class="handle-info-title-bar flex-center">
                    <img class="handle-info-img" src="@/assets/images/energy/overView/load.png" />
                    <span>当月负荷异常</span>
                  </div>
                  <div class="handle-info-bottom">
                    <div class="handle-info-bottom-bar">
                      <p class="num">{{ alarmData?.loadNotStart }}</p>
                      <span class="w-font">待处理</span>
                    </div>
                    <div class="handle-info-bottom-bar">
                      <p class="num">{{ alarmData?.loadHandling }}</p>
                      <span class="w-font">处理中</span>
                    </div>
                    <div class="handle-info-bottom-bar">
                      <p class="num">{{ alarmData?.loadComplete }}</p>
                      <span class="w-font">已完成</span>
                    </div>
                  </div>
                </div>
              </px-col>
              <px-col :span="8">
                <div class="top-bar handle-info-bar">
                  <div class="handle-info-title-bar flex-center">
                    <img class="handle-info-img" src="@/assets/images/energy/overView/loss.png" />
                    <span>当月损耗异常</span>
                  </div>
                  <div class="handle-info-bottom">
                    <div class="handle-info-bottom-bar">
                      <p class="num">{{ alarmData?.lossNotStart }}</p>
                      <span class="w-font">待处理</span>
                    </div>
                    <div class="handle-info-bottom-bar">
                      <p class="num">{{ alarmData?.lossHandling }}</p>
                      <span class="w-font">处理中</span>
                    </div>
                    <div class="handle-info-bottom-bar">
                      <p class="num">{{ alarmData?.lossComplete }}</p>
                      <span class="w-font">已完成</span>
                    </div>
                  </div>
                </div>
              </px-col>
            </px-row>
          </div>
        </px-col>
      </px-row>
      <px-row :gutter="16">
        <px-col :span="12">
          <div class="title-bar">近一年能源用量趋势</div>
          <div class="block-content chart-block">
            <px-row :gutter="8" class="mg-b-8">
              <px-col :span="12">
                <div ref="chartDomRef1" class="chart-dom" />
              </px-col>
              <px-col :span="12">
                <div ref="chartDomRef2" class="chart-dom" />
              </px-col>
            </px-row>
            <px-row :gutter="8">
              <px-col :span="12">
                <div ref="chartDomRef3" class="chart-dom" />
              </px-col>
              <px-col :span="12">
                <div ref="chartDomRef4" class="chart-dom" />
              </px-col>
            </px-row>
          </div>
        </px-col>
        <px-col :span="12">
          <div class="title-bar">年度能源费用</div>
          <div class="block-content cost-block">
            <px-row>
              <px-col :span="6">
                <div class="flex-center cost-bar">
                  <img class="handle-info-img" src="@/assets/images/energy/overView/elec_cost.png" />
                  <div>
                    <p class="w-font">用电费用</p>
                    <p class="w-font">
                      <span class="num"> {{ moneyFormat(costData.electricityAmt) }} </span>元
                    </p>
                  </div>
                </div>
              </px-col>
              <px-col :span="6">
                <div class="flex-center cost-bar">
                  <img class="handle-info-img" src="@/assets/images/energy/overView/gas_cost.png" />
                  <div>
                    <p class="w-font">大宗气费用</p>
                    <p class="w-font">
                      <span class="num"> {{ moneyFormat(costData.gasAmt) }} </span>元
                    </p>
                  </div>
                </div>
              </px-col>
              <px-col :span="6">
                <div class="flex-center cost-bar">
                  <img class="handle-info-img" src="@/assets/images/energy/overView/tap_water_cost.png" />
                  <div>
                    <p class="w-font">自来水费用</p>
                    <p class="w-font">
                      <span class="num"> {{ moneyFormat(costData.runningAmt) }} </span>元
                    </p>
                  </div>
                </div>
              </px-col>
              <px-col :span="6">
                <div class="flex-center cost-bar">
                  <img class="handle-info-img" src="@/assets/images/energy/overView/recycled_water_cost.png" />
                  <div>
                    <p class="w-font">再生水费用</p>
                    <p class="w-font">
                      <span class="num"> {{ moneyFormat(costData.reclaimAmt) }} </span>元
                    </p>
                  </div>
                </div>
              </px-col>
            </px-row>
            <px-row>
              <px-col :span="6">
                <div class="flex-center cost-bar">
                  <img class="handle-info-img" src="@/assets/images/energy/overView/steam_cost.png" />
                  <div>
                    <p class="w-font">蒸汽费用</p>
                    <p class="w-font">
                      <span class="num"> {{ moneyFormat(costData.steamAmt) }} </span>元
                    </p>
                  </div>
                </div>
              </px-col>
              <px-col :span="6">
                <div class="flex-center cost-bar">
                  <img class="handle-info-img" src="@/assets/images/energy/overView/hot_water_cost.png" />
                  <div>
                    <p class="w-font">热水费用</p>
                    <p class="w-font">
                      <span class="num"> {{ moneyFormat(costData.hotAmt) }} </span>元
                    </p>
                  </div>
                </div>
              </px-col>
              <px-col :span="6">
                <div class="flex-center cost-bar">
                  <img class="handle-info-img" src="@/assets/images/energy/overView/ng_cost.png" />
                  <div>
                    <p class="w-font">天然气费用</p>
                    <p class="w-font">
                      <span class="num"> {{ moneyFormat(costData.ngAmt) }} </span>元
                    </p>
                  </div>
                </div>
              </px-col>
            </px-row>
          </div>
          <div class="title-bar">能源负荷</div>
          <div class="block-content today-block">
            <div v-for="item in energyLossList" :key="item" class="progress-bar">
              <span class="progress-name">{{ item.name }}</span>
              <template v-if="item.percent > 100">
                <px-progress
                  class="progress"
                  :text-inside="true"
                  :stroke-width="16"
                  :format="() => formatProgress(item.percent)"
                  :color="customColorProgress"
                  :percentage="100"
                />
              </template>
              <template v-else>
                <px-progress class="progress" :text-inside="true" :stroke-width="16" :color="customColorProgress" :percentage="item.percent" />
              </template>
              <!-- <px-tooltip v-if="shouldShowTooltip(item.max)" :content="item.max" placement="top">
                <span class="num">{{ item.max }}</span>
              </px-tooltip>
              <span v-else class="num">{{ item.max }}</span> -->
            </div>
          </div>
        </px-col>
      </px-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, nextTick, computed } from "vue";
import dayjs from "dayjs";
import TriangleDownGreen from "@/assets/svg/energy/triangle_down_green.svg?component";
import TriangleUpRed from "@/assets/svg/energy/triangle_up_red.svg?component";
import TriangleUp from "@/assets/svg/energy/triangle_up.svg?component";
import TriangleDown from "@/assets/svg/energy/triangle_down.svg?component";
import {
  moneyFormat,
  drawLineChart,
  drawMultiLineChart,
  drawBarChart,
  drawStackedBarChart,
  energyNameMap,
  lineAreaColor,
  customColorProgress,
  getYearOnYear,
  getQuotient
} from "@/views/common/energy/overView/utils";
import { getListLoadStateAPI, getQtyAmtAPI, getTrendAPI, getAlarmDataAPI, getProductDataAPI } from "@/api/energy/overView";

defineOptions({
  name: "ALL_ENERGY_OVERVIEW_BOARD"
});

const time = ref();
const clickTimer = ref(null);
const chartDomRef1 = ref(null);
const chartDomRef2 = ref(null);
const chartDomRef3 = ref(null);
const chartDomRef4 = ref(null);

const state = reactive({
  loading: false,
  energyLossList: [],
  currentMonthData: {},
  lastMonthCostData: {},
  lastYearCostData: {},
  lastYearLastMonthCostData: {},
  costData: {},
  alarmData: {},
  currentMonthProductData: {},
  lastMonthProductData: {},
  lastYearProductData: {},
  lastYearLastMonthProductData: {}
});
const { loading, energyLossList, currentMonthData, alarmData, costData } = toRefs(state);

onMounted(() => {
  startClock();
  getLoadData();
  getCurrentMonthQtyAmt();
  getLastMonthQtyAmt();
  getLastYearQtyAmt();
  getLastYearLastMonthQtyAmt();
  getYearQtyAmt();
  getTrend();
  getAlarmData();
  getLastMonthProductData();
  getLastYearLastMonthProductData();
});

// 折标煤同比
const yoy_scoal = computed(() => {
  return getYearOnYear(state.currentMonthData.scoal, state.lastYearCostData.scoal);
});

// 当月等价折标煤同比
const yoy_scoalEquivalent = computed(() => {
  return getYearOnYear(state.currentMonthData.scoalEquivalent, state.lastYearCostData.scoalEquivalent);
});

// 当月当量折标煤同比
const yoy_scoalCalorific = computed(() => {
  return getYearOnYear(state.currentMonthData.scoalCalorific, state.lastYearCostData.scoalCalorific);
});

// 碳排放同比
const yoy_ecarbon = computed(() => {
  return getYearOnYear(state.currentMonthData.ecarbon, state.lastYearCostData.ecarbon);
});

// 单位产量能耗
const tcePCS = computed(() => {
  return getQuotient(state.lastMonthCostData.scoal, state.lastMonthProductData?.production);
});

// 单位产量能耗同比
const yoy_product = computed(() => {
  let num1 = getQuotient(state.lastMonthCostData?.scoal, state.lastMonthProductData?.production);
  let num2 = getQuotient(state.lastYearLastMonthCostData?.scoal, state.lastYearLastMonthProductData?.production);
  return getYearOnYear(num1, num2);
});

// 获取当月产量数据
const getCurrentMonthProductData = async () => {
  const params = {
    startDate: dayjs().format("YYYY-MM") + "-01 00:00:00",
    endDate: dayjs().endOf("month").format("YYYY-MM-DD") + " 23:59:59"
  };
  const res = await getProductDataAPI(params);
  state.currentMonthProductData = res[0] || {};
};
// 获取上个月产量数据
const getLastMonthProductData = async () => {
  const params = {
    startDate: dayjs().subtract(1, "month").format("YYYY-MM") + "-01 00:00:00",
    endDate: dayjs().subtract(1, "month").endOf("month").format("YYYY-MM-DD") + " 23:59:59"
  };
  const res = await getProductDataAPI(params);
  state.lastMonthProductData = res[0] || {};
};

// 获取上一年产量数据
const getLastYearProductData = async () => {
  const params = {
    startDate: dayjs().subtract(1, "year").format("YYYY-MM") + "-01 00:00:00",
    endDate: dayjs().subtract(1, "year").endOf("month").format("YYYY-MM-DD") + " 23:59:59"
  };
  const res = await getProductDataAPI(params);
  state.lastYearProductData = res[0] || {};
};

// 获取上一年上个月产量数据
const getLastYearLastMonthProductData = async () => {
  const params = {
    startDate: dayjs().subtract(1, "year").subtract(1, "month").format("YYYY-MM") + "-01 00:00:00",
    endDate: dayjs().subtract(1, "year").subtract(1, "month").endOf("month").format("YYYY-MM-DD") + " 23:59:59"
  };
  const res = await getProductDataAPI(params);
  state.lastYearLastMonthProductData = res[0] || {};
};

// 获取异常能耗数据
const getAlarmData = async () => {
  const firstDay = dayjs().startOf("month").format("YYYY-MM-DD");
  const lastDay = dayjs().endOf("month").format("YYYY-MM-DD");
  const params = {
    alarmTimeStart: firstDay,
    alarmTimeEnd: lastDay
  };
  const res = await getAlarmDataAPI(params);
  state.alarmData = res;
};

const formatProgress = percent => {
  return `${percent}%`;
};

// 负荷值
const getLoadData = async () => {
  try {
    state.loading = true;
    const nowDate = new Date();
    const yesterday = new Date(nowDate);
    yesterday.setDate(nowDate.getDate() - 1);
    let date = [
      yesterday.getFullYear(),
      (yesterday.getMonth() + 1).toString().padStart(2, "0"),
      yesterday.getDate().toString().padStart(2, "0")
    ].join("-");
    const res = await getListLoadStateAPI({
      periodType: 2,
      startTime: date + " 00:00:00",
      endTime: date + " 23:59:59"
    });
    state.energyLossList = res.map(item => {
      return {
        name: item.energyName + "(" + item.energyUnit + ")",
        max: item.realMaxLoad,
        percent: item.maxLoadRate.split("%")[0]
        //value: Number(item.value),
        //percent: Number(item.percent)
      };
    });
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};

const shouldShowTooltip = text => {
  return String(text).length > 20;
};

// 获取当月消耗量，费用
const getCurrentMonthQtyAmt = async () => {
  try {
    state.loading = true;
    const params = {
      endDate: dayjs().format("YYYY-MM-DD"),
      bucketWidth: 0,
      bucketUnit: "months"
    };
    const res = await getQtyAmtAPI(params);
    state.currentMonthData = res;
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};

// 获取上月消耗量，费用
const getLastMonthQtyAmt = async () => {
  try {
    state.loading = true;
    const params = {
      endDate: dayjs().subtract(1, "month").endOf("month").format("YYYY-MM-DD"),
      bucketWidth: 0,
      bucketUnit: "months"
    };
    const res = await getQtyAmtAPI(params);
    state.lastMonthCostData = res;
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};
// 获取去年当月消耗量，费用
const getLastYearQtyAmt = async () => {
  try {
    state.loading = true;
    const params = {
      endDate: dayjs().subtract(1, "year").format("YYYY-MM-DD"),
      bucketWidth: 0,
      bucketUnit: "months"
    };
    const res = await getQtyAmtAPI(params);
    state.lastYearCostData = res;
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};
// 获取去年上个月消耗量，费用
const getLastYearLastMonthQtyAmt = async () => {
  try {
    state.loading = true;
    const params = {
      endDate: dayjs().subtract(1, "year").subtract(1, "month").endOf("month").format("YYYY-MM-DD"),
      bucketWidth: 0,
      bucketUnit: "months"
    };
    const res = await getQtyAmtAPI(params);
    state.lastYearLastMonthCostData = res;
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};
// 获取年消耗量，费用
const getYearQtyAmt = async () => {
  try {
    // 获取当前日期
    const currentDate = dayjs();
    // 获取上个月的日期
    const lastMonth = currentDate.subtract(1, "month");
    // 如果当前是1月，需要获取上一年12月的最后一天
    const targetMonth = currentDate.month() === 0 ? lastMonth.year(currentDate.year() - 1).month(11) : lastMonth;
    // 获取目标月份的最后一天
    const lastDayOfLastMonth = targetMonth.endOf("month").format("YYYY-MM-DD");
    state.loading = true;
    const params = {
      endDate: lastDayOfLastMonth,
      bucketWidth: 0,
      bucketUnit: "years"
    };
    const res = await getQtyAmtAPI(params);
    state.costData = res;
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};

const colorConfig = {
  type: "linear",
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  global: false
};

const formatMultiLineYData = (yData, args) => {
  if (yData) {
    let config = {
      type: "bar",
      smooth: true,
      emphasis: {
        focus: "series"
      }
    };
    args ? "" : (config.stack = "Total");
    return yData.map((item, index) => {
      let colorEnd = lineAreaColor[index].end;
      let colorStart = lineAreaColor[index].start;
      return {
        ...config,
        name: item.name,
        data: item.value,
        areaStyle: {
          color: {
            ...colorConfig,
            colorStops: [
              {
                offset: 0,
                color: colorEnd // 100% 处的颜色
              },
              {
                offset: 1,
                color: colorStart // 0% 处的颜色
              }
            ]
          }
        }
      };
    });
  } else {
    return [];
  }
};

// 折线图
const getTrend = async () => {
  try {
    state.loading = true;
    const params = {
      endDate: dayjs().format("YYYY-MM-DD"), // 当前时间,示例值(2024-11-05)
      bucketWidth: 11, // 时间间隔数字 0-当前 大于0 - 往前追溯
      bucketUnit: "months" // 时间间隔单位 months-月 years-年
    };
    const res = await getTrendAPI(params);
    // 电
    let elec_xData = res.elementryQty?.xaxis;
    let elec_yData = res.elementryQty?.yaxis[0]?.value;
    nextTick(() => {
      // drawLineChart(chartDomRef1.value, elec_xData, elec_yData, ["电"], "kW·h");
      drawBarChart(chartDomRef1.value, elec_xData, elec_yData, ["电"], "kW·h", "#FFFFFF");
    });
    // 蒸汽、热水
    let steam_xData = res.hotSteamQty?.xaxis;
    let steam_yData = res.hotSteamQty?.yaxis;
    let steam_legend = res.hotSteamQty?.yaxis.map(item => item.name);
    nextTick(() => {
      // drawMultiLineChart(chartDomRef2.value, steam_xData, formatMultiLineYData(steam_yData), steam_legend, "t");
      drawStackedBarChart(chartDomRef2.value, steam_xData, formatMultiLineYData(steam_yData), steam_legend, "t", "#FFFFFF");
    });
    // 自来水 再生水
    let water_xData = res.waterQty?.xaxis;
    let water_yData = res.waterQty?.yaxis;
    let water_legend = res.waterQty?.yaxis.map(item => item.name);
    nextTick(() => {
      // drawMultiLineChart(chartDomRef3.value, water_xData, formatMultiLineYData(water_yData), water_legend, "m³");
      drawStackedBarChart(chartDomRef3.value, water_xData, formatMultiLineYData(water_yData), water_legend, "m³", "#FFFFFF");
    });
    // 气体
    let gas_xData = res.gasQty?.xaxis;
    let gas_yData = res.gasQty?.yaxis;
    let gas_legend = res.gasQty?.yaxis.map(item => item.name);
    nextTick(() => {
      // drawMultiLineChart(chartDomRef4.value, gas_xData, formatMultiLineYData(gas_yData), gas_legend, "Nm³");
      drawStackedBarChart(chartDomRef4.value, gas_xData, formatMultiLineYData(gas_yData, true), gas_legend, "Nm³", "#FFFFFF");
    });
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};

const startClock = () => {
  clearClock();
  clickTimer.value = setInterval(async () => {
    time.value = dayjs().format("YYYY/MM/DD HH:mm:ss");
  }, 1000);
};
const clearClock = () => {
  clearInterval(clickTimer.value);
};
</script>

<style lang="scss" scoped>
.overView-container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  padding: 15px 23px;
  background-color: #001e3b;
  border-radius: 4px;
}

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 74px;
  padding: 0 16px;
  background-image: url("@/assets/images/energy/overView/header.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  .header-font {
    font-size: 24px;
    font-weight: 600;
    line-height: 29px;
    color: #00c2ff;
    background: linear-gradient(180deg, #fff 0%, #00c2ff 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .header-left {
    width: 260px;
    height: 40px;
    line-height: 40px;
    text-align: left;
    background-image: url("@/assets/images/energy/overView/header_left.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
  }
}

.view-info,
.handle-info {
  padding: 8px 16px;
  background-image: url("@/assets/images/energy/overView/block_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.top-bar {
  width: 100%;
  height: 164px;
  padding: 0 16px;
  background-image: url("@/assets/images/energy/overView/info_border.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.view-info-bar {
  display: flex;
  justify-content: space-around;
}

.fdc {
  flex-direction: column;
}

.top-bar-black {
  width: 100%;
  display: flex;
  & > div {
    width: 100%;
  }
  .rt {
    width: 100%;
    display: flex;
    justify-content: space-between;
    p {
      flex-grow: 1;
    }
    div {
      padding-left: 8px;
      white-space: nowrap;
    }
  }
}

.w45 {
  display: inline-block;
  width: 49px;
  height: 49px;
  margin-right: 8px;
}

.view-info-img {
  display: inline-block;
  width: 70px;
  height: 70px;
  margin-right: 8px;
}

.view-info-title {
  font-size: 16px;
  color: #fff;
}

.num {
  font-weight: 700;
  color: #00c2ff;
}

.view-info-num {
  font-size: 20px;
  white-space: nowrap;
}

.w-font {
  color: #fff;
}

.triangle {
  display: inline-block;
  width: 9px;
  height: 9px;
  color: #154671;
}

.handle-info-img {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-right: 16px;
}

.handle-info-title-bar {
  span {
    font-size: 16px;
    color: #fff;
  }
}

.handle-info-bottom {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 16px;
  font-size: 16px;
}

.title-bar {
  width: 500px;
  height: 51px;
  padding-left: 35px;
  line-height: 47px;
  color: #fff;
  background-image: url("@/assets/images/energy/overView/title_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.block-content {
  background-image: url("@/assets/images/energy/overView/block_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.chart-block {
  width: 100%;
  height: 607px;
  padding: 8px 16px;

  .chart-dom {
    width: 100%;
    height: 290px;
    background: #0f263f;
    border: 1px solid #2c4056;
  }
}

.cost-block {
  width: 100%;
  height: 200px;
  padding: 8px 16px;
  margin: 4px 0;
}

.cost-bar {
  width: 100%;
  height: 80px;
  vertical-align: middle;
}

.today-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  height: 348px;
  padding: 16px;
}

.progress-bar {
  display: flex;
  align-items: center;
  width: 50%;
  font-size: 12px;
  color: #fff;

  .progress-name {
    display: inline-block;
    min-width: 140px;
    margin-right: 8px;
    text-align: right;
  }

  .num {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .progress {
    width: 246px;
    margin-right: 8px;
  }

  :deep(.px-progress-bar__outer) {
    background: #103454;
    border-radius: 0;
  }

  :deep(.px-progress-bar__inner) {
    border-radius: 0;
  }
}

.flex-center {
  display: flex;
  align-items: center;
}

.mg-r-8 {
  margin-right: 8px;
}

.mg-l-8 {
  margin-left: 8px;
}

.mg-t-8 {
  margin-top: 8px;
}

.mg-b-8 {
  margin-bottom: 8px;
}

:deep(.px-progress--text-inside-ten .px-progress-bar__innerText) {
  margin-left: 8px;
  color: #fff;
}
</style>
